<template>
    <div class="concat-view">
        <div class="container">
            <el-button @click="backTo" type="primary" plain :icon="ArrowLeft" class="back-btn">
                返回
            </el-button>

            <el-card class="concat-card" shadow="never">
                <template #header>
                    <div class="card-header">
                        <el-icon>
                            <Message />
                        </el-icon>
                        <span>联系作者</span>
                    </div>
                </template>

                <div class="contact-info">
                    <div class="info-item">
                        <el-icon class="info-icon">
                            <Message />
                        </el-icon>
                        <div class="info-content">
                            <h4>邮箱</h4>
                            <p>15016501050@163.com</p>
                        </div>
                    </div>

                    <div class="info-item">
                        <el-icon class="info-icon">
                            <ChatDotRound />
                        </el-icon>
                        <div class="info-content">
                            <h4>微信</h4>
                            <p>请扫描下方二维码</p>
                        </div>
                    </div>

                    <div class="info-item">
                        <el-icon class="info-icon">
                            <Platform />
                        </el-icon>
                        <div class="info-content">
                            <h4>其他社交媒体</h4>
                            <p>微博：xxxx</p>
                            <p>QQ:xxxx</p>
                            <p>抖音：xxxx</p>
                            <p>知乎：xxxx</p>
                            <p>GitHub：xxxx</p>
                        </div>
                    </div>
                </div>

                <el-divider />

                <div class="qr-code">
                    <el-empty description="二维码加载中..." />
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ArrowLeft, Message, ChatDotRound, Platform } from '@element-plus/icons-vue'

const router = useRouter()

const backTo = () => {
    router.back()
}
</script>

<style lang="less" scoped>
@import "../assets/varable.less";

.concat-view {
    min-height: calc(100vh - 300px);
    padding: 30px 0;

    .back-btn {
        margin-bottom: 20px;
    }

    .concat-card {
        border-radius: 16px;
        max-width: 800px;
        margin: 0 auto;

        :deep(.el-card__header) {
            background: @bg-primary;
            padding: 20px;
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 20px;
            font-weight: 600;
            color: @text-primary;

            .el-icon {
                font-size: 24px;
                color: @primary-color;
            }
        }

        .contact-info {
            .info-item {
                display: flex;
                align-items: flex-start;
                gap: 15px;
                padding: 20px;
                margin-bottom: 10px;
                border-radius: 8px;
                transition: all 0.3s;

                &:hover {
                    background: @primary-lighter;
                }

                .info-icon {
                    font-size: 32px;
                    color: @primary-color;
                    flex-shrink: 0;
                }

                .info-content {
                    h4 {
                        font-size: 18px;
                        font-weight: 600;
                        color: @text-primary;
                        margin: 0 0 8px 0;
                    }

                    p {
                        color: @text-secondary;
                        margin: 0;
                    }
                }
            }
        }

        .qr-code {
            text-align: center;
            padding: 20px;
        }
    }
}
</style>
